<template>
  <view class="box info">
    <view class="u-border-bottom info-top">
      <view class="left">
        <view class="name"><text>{{resumeData.Iname_p}}</text></view>
        <view class="post">
          <template v-if="resumeData.personWorkArr && resumeData.personWorkArr.length">
            <text>{{resumeData.personWorkArr[0].jtzw}} · {{resumeData.personWorkArr[0].company}}</text>
          </template>
          </view>
      </view>
      <view class="right">
        <view class="avatar-wrap">
          <image class="avatar" :src="resumeData.src_p" mode="aspectFill"></image>
          <image v-if="resumeData.Sex_p == '男'" class="icon-sex" :src="manImg"></image>
          <image v-if="resumeData.Sex_p == '女'"  class="icon-sex" :src="womanImg"></image>
        </view>
      </view>
    </view>
    <view class="info-bottom">
      <view class="info-detail">
        <view class="left">
          <text>{{resumeData.Gznum_p || 0}}年经验</text>
          <text><text class="divide" v-if="resumeData.Edu_p">|</text>{{resumeData.Edu_p || ''}}</text>
          <text><text class="divide">|</text>{{resumeData.Nianling_p || 0}}岁</text>
        </view>
        <view class="right">
          <text>{{handleStatus(status)}}</text>
        </view>
      </view>
      <view class="des">
        <text>{{resumeData.Grzz_p || ''}}</text>
      </view>
    </view>
</view>
</template>

<script>

import { aimList } from '@/utils/data';

export default {
  props: {
    resumeData: {
      type: Object,
      default: () => ({}),
    },
    personId: {
      type: [String, Number],
      default: '',
    },
    status: {
      type: [String, Number],
      default: '',
    }
  },
  data() {
    return {
      manImg: this.$imgBase + "resume/man.png",
      womanImg: this.$imgBase + "resume/woman.png",
    }
  },
  methods: {
    handleStatus(val) {
      let status = aimList.find((ele) => +ele.value === +val);
      return status ? status.label : "";
    },
  }
}
</script>

<style lang="scss" scoped>
.box {
  margin-bottom: $uni-spacing-col-big;
  padding: $uni-spacing-col-big;
  background-color: $uni-bg-color;
  border-radius: $uni-border-radius-lg;
}
.info {
  &-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 34rpx;
    padding-bottom: 40rpx;

    .name {
      margin-bottom: 20rpx;
      font-size: 40rpx;
      font-weight: bold;
      color: #000;
    }
    .post {
      font-size: $uni-font-size-base;
      color: $uni-text-color-666;
    }
    .avatar-wrap {
      position: relative;
      display: inline-block;
      padding: 4rpx;
      border-radius: 50%;
      background:linear-gradient(135deg, rgba(255, 212, 128, 1), rgba(255, 95, 55, 1));
      // border: 6rpx solid #FF5F37;
      .icon-sex {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 28rpx;
        height: 28rpx;

      }
    }
    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
    }
  }

  &-bottom {
    font-size: $uni-font-size-base;
    .info-detail {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
      .left {
        color: #333;
      }
      .right {
        color: $uni-text-color-999;
      }
    }
  }
}
</style>